<%-- 
    Document   : mantenedorUsuarioDisplay
    Created on : 13-11-2014, 23:40:52
    Author     : Rodrigo
--%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Administración de usuarios</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <style type="text/css">
            .clave-no-coincide {
                /*border: 1px solid red !important;*/
                background-color: #f2dede !important;
            }
        </style>
    </head>
    <body>
    <fmt:formatDate var="fechaNacimiento" value="${datoUsuarioEditar.fechaNacimiento}" pattern="yyyy-MM-dd"/>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="text-center">
                    <c:choose>
                        <c:when test="${modo.isInsert()}">
                            Ingresar nuevo usuario
                        </c:when>
                        <c:otherwise>
                            Modificar usuario
                        </c:otherwise>
                    </c:choose>
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <form id="formUsuario" name="formUsuario" method="POST">
                    <input type="hidden" name="modo" value="${modo.name()}"/>
                    <input type="hidden" name="id" value="${usuarioEditar.id}"/>
                    <h3>Datos</h3>
                    <br>

                    <strong class="font-size-14">Tipo de usuario:</strong>
                    <br>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default btn-sm">
                            <input type="radio" name="tipoUsuario" value="2" autocomplete="off"> Estandar
                        </label>
                        <label class="btn btn-default btn-sm">
                            <input type="radio" name="tipoUsuario" value="3" autocomplete="off"> Docente
                        </label>
                        <label class="btn btn-default btn-sm">
                            <input type="radio" name="tipoUsuario" value="1" autocomplete="off"> Administrador
                        </label>
                    </div>
                    <br><br>

                    <strong class="font-size-14">Nombre de usuario:</strong>
                    <span class="help-block">
                        Este es el nombre con el que el usuario ingresará al sistema
                    </span>
                    <input type="text" id="nombreUsuario" name="nombreUsuario" class="form-control"/>
                    <br>

                    <c:if test="${modo.isInsert()}">
                        <strong class="font-size-14">Clave:</strong>
                        <span class="help-block">
                            Con esta clave el usuario ingresará al sistema
                        </span>
                        <input type="password" id="clave" name="clave" class="form-control input-clave"/>
                        <input type="password" id="repetirClave" placeholder="Repite su clave..." class="form-control input-clave"/>
                        <div id="claveMuyCorta" class="alert alert-warning display-none">
                            <i class="glyphicon glyphicon-remove color-red"></i> Ingrese una clave con al menos 6 caracteres
                        </div>
                        <div id="claveNoCoincide" class="alert alert-warning display-none">
                            <i class="glyphicon glyphicon-remove color-red"></i> Las claves no coinciden
                        </div>
                        <br>
                    </c:if>

                    <strong class="font-size-14">Empresa:</strong> ${empresa.nombre}
                    <!--                        <span class="help-block">
                                                Especifique a cual empresa pertenece el usuario
                                            </span>
                                            <select name="empresa" class="form-control">
                                                <option value="0"></option>
                    <%--<c:forEach var="empresa" items="${listaEmpresa}">--%>
                        <option value="${empresa.id}">${empresa.nombre}</option>
                    <%--</c:forEach>--%>
                </select>-->

                    <br>
                    <hr>
                    <br>

                    <h3>Datos personales</h3>
                    <strong class="font-size-14">Nombre y apellidos:</strong>
                    <span>
                        <input type="text" name="nombre" placeholder="Nombre..." class="form-control"/>
                        <input type="text" name="primerApellido" placeholder="Primer apellido..." class="form-control"/>
                        <input type="text" name="segundoApellido" placeholder="Segundo apellido..." class="form-control"/>
                    </span>
                    <br>

                    <c:if test="${modo.isInsert()}">
                        <strong class="font-size-14">RUT:</strong>
                        <span class="help-block">
                            Ingrese el número de cédula de identificación con el siguiente formato: <b>11222333-K</b>
                        </span>
                        <input type="text" name="rut" class="form-control"/>
                        <br>
                    </c:if>

                    <strong class="font-size-14">Dirección:</strong>
                    <input type="text" name="direccion" class="form-control"/>
                    <br>

                    <strong class="font-size-14">Fecha de nacimiento:</strong>
                    <input type="date" name="fechaNacimiento" class="form-control" value="${fechaNacimiento}"/>

                    <br>
                    <hr>
                    <br>

                    <strong class="font-size-14">Asignar cursos:</strong>
                    <br>
                    <div class="btn-group btn-group-vertical" data-toggle="buttons">
                        <c:forEach var="curso" items="${listaCurso}">
                            <label class="btn btn-default btn-sm text-left">
                                <input type="checkbox" name="cursoAsignado" class="curso-disponible" autocomplete="off" value="${curso.id}"> <b>${curso.nombre}</b>
                            </label>
                        </c:forEach>
                    </div>
                    <span id="labelCursosAsignados" class="help-block"></span>
                </form>

                <br>
                <div class="text-center">
                    <button type="button" class="btn btn-default" onclick="cancelar()">Cancelar</button>
                    <button type="button" class="btn btn-primary width-300px" onclick="guardarUsuario()"
                            data-loading-text="<i class='fa fa-spin fa-spinner'></i> Guardando...">
                        Guardar usuario
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${contextPath}/js/epraxis.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
        <c:if test="${modo.isEdit()}">
            procesarDatosUsuarioEditar();
        </c:if>
            $('#nombreUsuario').focus();

            $('.input-clave').on('blur', function() {
                if ($('#clave').val() != $('#repetirClave').val()) {
                    $('.input-clave').addClass('clave-no-coincide');
                    $('#claveNoCoincide').show();
                } else {
                    $('.input-clave').removeClass('clave-no-coincide');
                    $('#claveNoCoincide').hide();
                }

                if ($('#clave').val().length < 6) {
                    $('.input-clave').addClass('clave-no-coincide');
                    $('#claveMuyCorta').show();
                } else {
                    $('.input-clave').removeClass('clave-no-coincide');
                    $('#claveMuyCorta').hide();
                }
            });

            $('#labelCursosAsignados').html('<b>' + cantidadSeleccionado + '</b> cursos asignados de <b>' + cantidadMaxima + '</b>');

            $('.curso-disponible').on('change', function() {
                calcularCursosSeleccionados();
            });
        });

        var cantidadMaxima = $('.curso-disponible').length;
        var cantidadSeleccionado = 0;
        function calcularCursosSeleccionados() {
            cantidadSeleccionado = 0;
            $('.curso-disponible').each(function() {
                if ($(this).is(':checked')) {
                    cantidadSeleccionado++;
                }
            });
            if (cantidadSeleccionado == cantidadMaxima) {
                $('#labelCursosAsignados').html('<b>Todos los cursos seleccionados</b>');
            } else {
                $('#labelCursosAsignados').html('<b>' + cantidadSeleccionado + '</b> cursos asignados de <b>' + cantidadMaxima + '</b>');
            }
        }

        function cancelar() {
            parent.cerrarModalUsuario();
        }

        function guardarUsuario() {
            var url = '${contextPath}/app/admin/usuario/MantenedorUsuarioProcess.do';
            var parametros = $('#formUsuario').serialize();
            post(url, parametros, function(data, isError) {
                if (isError) {
                    alert(data);
                } else {
                    cancelar();
                    parent.document.location.reload();
                }
            });
        }

        function procesarDatosUsuarioEditar() {
            $('input[name=tipoUsuario]').each(function() {
                if ($(this).val() == '${usuarioEditar.getTipoUsuario().id}') {
                    $(this).attr('checked', true);
                    $(this).parent('label').addClass('active');
                }
            });

            $('input[name=cursoAsignado]').each(function() {
        <c:forEach var="cursoAsignado" items="${usuarioEditar.usuarioCursoAsignadoList}">
                if ($(this).val() == '${cursoAsignado.curso.id}') {
                    $(this).attr('checked', true);
                    $(this).parent('label').addClass('active');
                }
        </c:forEach>
            });

            $('input[name=nombreUsuario]').val('${usuarioEditar.usuario}');
            $('input[name=nombre]').val('${datoUsuarioEditar.nombre}');
            $('input[name=primerApellido]').val('${datoUsuarioEditar.primerApellido}');
            $('input[name=segundoApellido]').val('${datoUsuarioEditar.segundoApellido}');
            $('input[name=rut]').val('${datoUsuarioEditar.getRut()}');
            $('input[name=direccion]').val('${datoUsuarioEditar.direccion}');

            calcularCursosSeleccionados();
//            $('input[name=fechaNacimiento]').val('${fechaNacimiento}');
        }
    </script>
</body>
</html>
